<template>
  <div class="container">
    <div class="main-container">
      <div class="header-container">
        <div class="title">事故管理台账</div>
      </div>
      <div class="main is-scroll-bar">
        <div class="item-content">
          <myTable
            :loading="isLoading"
            ref="table"
            :data="data"
            :label="label"
            :linkShow2="true"
            :addShow="true"
            :searchShow="true"
            :paginationConfig="paginationConfig"
            :multiSelectShow="true"
            @deleteRow="deleteRow"
            @selectionChange="selectionChange"
            @changePage="changePage"
            @changeSize="changeSize"
            @edit="edit"
            :pagingShow="false"
          >
            <template #second>
              <el-button type="success" @click="visible = true">新增</el-button>
              <!-- <myUpload
                @addFile="addFile"
                :showList="false"
                :limit="1"
              ></myUpload> -->
            </template>

            <template #serialNumber="obj">
              <el-link
                type="primary"
                href="#/equipmentmaintenance"
                target="_blank"
              >
                {{ obj.params.serialNumber }}</el-link
              >
            </template>
          </myTable>
        </div>
      </div>
    </div>
    <myDialog
      :Form="Form"
      :label="label2"
      :visible="visible"
      @disVisible="visible = false"
      @submitSecurity="submitSecurity"
    >
      <template #remark="obj">
        <el-input
          placeholder="请输入备注"
          type="textarea"
          :rows="2"
          v-model="obj.params.row.remark"
        >
        </el-input>
      </template>
    </myDialog>
  </div>
</template>

<script setup>
import { ref, defineComponent } from "vue";
const NewComponentName = defineComponent({
  name: "SafetyManagementIndex",
  setup() {
    return {};
  },
});

console.log(NewComponentName);
//
const label = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "事故等级",
    prop: "b",
  },
  {
    label: "事故类型",
    prop: "c",
  },
  {
    label: "时间",
    prop: "d",
  },
  {
    label: "地点",
    prop: "e",
  },
  {
    label: "事故报告",
    prop: "f",
  },
  {
    label: "事故调查",
    prop: "g",
  },
  {
    label: "处理情况",
    prop: "h",
  },
]);
const label2 = ref([
  {
    label: "序号",
    prop: "a",
  },
  {
    label: "事故等级",
    prop: "b",
  },
  {
    label: "事故类型",
    prop: "c",
  },
  {
    label: "时间",
    prop: "d",
  },
  {
    label: "地点",
    prop: "e",
  },
  {
    label: "事故报告",
    prop: "f",
  },
  {
    label: "事故调查",
    prop: "g",
  },
  {
    label: "处理情况",
    prop: "h",
  },
]);

const data = ref([]);
const edit = (val) => {
  Form.value = {
    id: val.id,
    serialNumber: val.serialNumber,
    type: val.type,
    checklistContents: val.checklistContents,
    circumstance: val.circumstance,
    remark: val.remark,
    edit: true,
  };

  visible.value = true;
};
const visible = ref(false);
const submitSecurity = async (val) => {
  console.log(val);
  if (val.value.edit == true) {
    visible.value = false;
    let result = await putCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "修改成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.message,
        type: "error",
      });
    }
    changeTable();
  } else {
    visible.value = false;
    let result = await addCorporateProductionResponsibility(val.value);
    if (result.code == 0) {
      Notification({
        title: "成功",
        message: "新增成功",
        type: "success",
      });
    } else {
      Notification({
        title: "失败",
        message: result.msg,
        type: "error",
      });
    }
    changeTable();
  }
  Form.value = {
    id: null,
    serialNumber: null,
    type: null,
    checklistContents: null,
    circumstance: null,
    remark: null,
  };
};
const Form = ref({
  id: null,
  serialNumber: null,
  type: null,
  checklistContents: null,
  circumstance: null,
  remark: null,
});

const paginationConfig = ref({
  page: 1,
  size: 10,
  total: 0,
});
const changePage = (val) => {
  paginationConfig.value.page = val;
  changeTable();
};
const changeSize = (val) => {
  paginationConfig.value.size = val;
  changeTable();
};
import {
  getCorporateProductionResponsibility,
  deleteCorporateProductionResponsibility,
  addCorporateProductionResponsibility,
  putCorporateProductionResponsibility,
} from "@/api/safetymanagement";
import { onMounted } from "vue";
import myTable from "@/components/my-table.vue";
import myDialog from "@/components/my-dialog.vue";

console.log(NewComponentName);

import { Notification } from "element-ui";

const isLoading = ref(true);
const deleteRow = (id) => {
  selectList.value = [id];
  deleteList();
};
const changeTable = async (name) => {
  isLoading.value = true;
  let result = await getCorporateProductionResponsibility(
    paginationConfig.value.page,
    paginationConfig.value.size,
    name
  );
  console.log(result.message);
  console.log(result.data);
  paginationConfig.value.total = Number(result.message);
  isLoading.value = false;
  // data.value = result.data;
};
onMounted(() => {
  changeTable();
});
//上传文件
// const addFile = async (list) => {
//   let result = await addCorporateProductionResponsibility({
//     fileName: list[0].name,
//     fileUrl: list[0].url,
//   });
//   if (result.code == 0) {
//     Notification({
//       title: "成功",
//       message: "上传成功",
//       type: "success",
//     });
//     changeTable();
//   } else {
//     Notification({
//       title: "失败",
//       message: "上传失败",
//       type: "error",
//     });
//   }
// };
//批量选择的数据
const selectList = ref();
const selectionChange = (value) => {
  selectList.value = value;
};
//删除所选中的
const deleteList = async () => {
  if (selectList.value.length == 0) {
    Notification({
      title: "警告",
      message: "请选择要删除的项",
      type: "warning",
    });
    return;
  }
  let result = await deleteCorporateProductionResponsibility(selectList.value);
  if (result.code == 0) {
    Notification({
      title: "成功",
      message: "删除成功",
      type: "success",
    });
    paginationConfig.value.page = 1;
    changeTable();
  } else {
    Notification({
      title: "失败",
      message: "删除失败",
      type: "error",
    });
  }
};
//选中的id
selectionChange([]);
const table = ref(null);
</script>

<style lang="scss" scoped>
.container {
  height: 100%;
  padding: 15px;
  box-sizing: border-box;
  overflow: hidden;

  .main-container {
    height: 100%;
    overflow: hidden;
    border: solid 1px #e6e6e6;
    border-radius: 4px;
    box-sizing: border-box;
    background-color: #fff;
    display: flex;
    flex-direction: column;

    .header-container {
      padding: 15px 15px;
      border-bottom: solid 1px #e6e6e6;
      box-sizing: border-box;
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-between;
      flex-wrap: wrap;

      .title {
        position: relative;
        font-weight: bold;
        color: #333;
        font-size: 15px;
        padding-left: 16px;

        &::after {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 0;
          top: calc(50% - 8px);
          position: absolute;
        }

        &::before {
          content: "";
          width: 3px;
          height: 16px;
          background-color: #82a848;
          left: 5px;
          top: calc(50% - 8px);
          position: absolute;
        }
      }

      .search-container {
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 10px;

        .item-filter-width {
          width: 380px;
        }
      }
    }

    .main {
      flex: 1;
      height: 0;
      padding: 12px 15px;
      box-sizing: border-box;
      overflow-x: hidden;
      overflow-y: auto;

      .item-content {
        margin-bottom: 20px;

        .item-header {
          display: flex;
          flex-direction: row;
          align-items: center;
          justify-content: space-between;
          margin-bottom: 10px;

          .subheading {
            position: relative;
            color: #555;
            font-size: 14px;
            padding-left: 14px;

            &::after {
              content: "";
              width: 2px;
              height: 14px;
              background-color: #82a848;
              left: 0;
              top: calc(50% - 7px);
              position: absolute;
            }

            &::before {
              content: "";
              width: 2px;
              height: 14px;
              background-color: #82a848;
              left: 4px;
              top: calc(50% - 7px);
              position: absolute;
            }
          }
        }

        .content-container {
          margin-top: -1px;
        }
      }
    }
  }
}

::v-deep .el-descriptions--medium.is-bordered .el-descriptions-item__cell {
  width: 134px !important;
}

.m-b-5 {
  margin-bottom: 5px;
}

.m-r-5 {
  margin-right: 5px;
}
</style>
